<template>
  <div class="result-exam">
    <div class="result-box">
      <!-- 上半部分信息展示 -->
    <ExamInfo
    :title="'小组练习 标题'"
      :test-date="examData.testDate"
      :candidate="examData.candidate"
      :exam-name="examData.examName"
      :total-score="examData.totalScore"
    />
    
    <div class="exam-content">文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容</div>
    <!-- 标签页切换部分 -->
    <div class="tab-container">
      <div class="tab-header">
        <div
          v-for="tab in tabs"
          :key="tab.key"
          :class="['tab-item', { active: currentTab === tab.key }]"
          @click="handleTabClick(tab.key)"
        >
          {{ tab.label }}
        </div>
      </div>
      
      <!-- 成绩分析部分 -->
      <div class="performance-section">
        <div class="section-header">
          <h3>Performance By Section</h3>
          <div class="header-icons">
           <div class="icon-item" >
            <img src="~@/static/v1.png" alt="">
           </div>
           <div class="icon-item active">
            <img src="~@/static/v2.png" alt="">
           </div>
          </div>
        </div>
        <!-- 第三表格，第二表格数据展示 -->
        <!-- <DataTable 
              title="表格标题表格标题表格标题"
              :headers="tableHeaders"
              :tableData="tableData"
            />
            <DataFrame
              :frame-number="365"
              :headers="frameHeaders"
              :frame-data="frameData"
            /> 
            -->
        <!-- 成绩详情列表 -->
        <!-- <totalScore :scores="scoreData" /> -->
        <div class="performance-content">
            <!-- 添加题目状态图表组件 -->
            <DataEcharts :question-list="[
    { isCorrect: true, score: 4.8 },
    { isCorrect: false, score: 2.5 },
    { isCorrect: true, score: 4.2 },
    { isCorrect: false, score: 3.1 },
    { isCorrect: true, score: 4.5 }
  ]"
  :average-score="3.5" />
            <!-- 右侧其他内容 -->
            <div class="right-content">
              <!-- ... 其他内容保持不变 ... -->
            </div>
          </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script setup>

import ExamInfo from '../resultExam/ExamInfo.vue'
import totalScore from '../resultExam/totalScore.vue'
import { ref } from 'vue'
import DataTable from './DataTable.vue'
import DataEcharts from './DataEcharts.vue'
import DataFrame from './DataFram.vue'

const tableHeaders = ['表头1', '表头2', '表头2', '表头2', '表头3']
const tableData = [
  ['可点击样式', '红色', '加粗', '默认正文', '23th'],
  ['Total Score', '23th', '23th', '23th', '23th'],
  ['Total Score', '23th', '23th', '23th', '23th'],
  ['Total Score', '23th', '23th', '23th', '23th']
]
const questionStatusList = ref([
  { isCorrect: true, score: 4.8 },
  { isCorrect: false, score: 3.5 },
  { isCorrect: true, score: 5.2 },
  { isCorrect: true, score: 4.1 },
  { isCorrect: false, score: 4.9 }
  // ... 可以添加更多题目
])
const frameHeaders = ['表头1', '表头2', '表头2', '表头2', '表头3']
const frameData = [
  ['Total Score', '23th', '23th', '23th', '23th'],
  ['Total Score', '23th', '23th', '23th', '23th'],
  ['Total Score', '23th', '23th', '23th', '23th'],
  ['Total Score', '23th', '23th', '23th', '23th']
]

// 标签页配置
const tabs = [
  { key: 'total', label: 'Total Score' },
  { key: 'tab2', label: '名称2' },
  { key: 'tab3', label: '名称3' },
  { key: 'tab4', label: '名称3' }
]

// 当前选中的标签
const currentTab = ref('total')

// 考试基本信息
const examData = ref({
  testDate: '2025/01/23',
  candidate: 'sssss',
  examName: 'dfgfd',
  totalScore: 2345
})

// 成绩数据
const scoreData = ref([
  { label: '表头1', rank: '23th', score: 344, maxScore: 899 },
  { label: '表头2', rank: '23th', score: 344, maxScore: 899 },
  { label: '表头3', rank: '23th', score: 344, maxScore: 899 }
])

// 标签切换处理
const handleTabClick = (tab) => {
  currentTab.value = tab
}
</script>

<style scoped lang="scss">
.result-exam {

  display:flex;
  justify-content: center;


  .result-box{
    margin:20px 0px;
    padding:10px 20px;
    width:1000px;
    background: #fff;
    border-radius: 8px;
  }
}

.tab-container {
  margin-top: 20px;
}

.tab-header {
  display: flex;
  border-bottom: 1px solid #eee;
  gap: 8px;
}

.tab-item {
  padding: 12px 16px;
  cursor: pointer;
  width:140px;
  text-align: center;
  transition: all 0.3s;
  background: #F6F6F6;
  border-bottom: 2px solid #EEEEEE;
}

.tab-item.active {
  background: #f0f2ff;
  border-bottom: 2px solid #6366f1;
}

.performance-section {
  margin-top: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  height:38px;
  background: #475569;
  color: white;
}

.header-icons {
  display: flex;
  // gap: 12px;
  width:60px;
  height:22px;
  background: #fff;
  border-radius:20px;
  
  .icon-item{
    width:30px;
    display:flex;
    justify-content: center;
    align-items: center;
    &.active{
      background: #BDEFFF;
      border-radius:0px 20px 20px 0px;
    }
  }
  img{
    width:14px;
    height:14px;;
  }
}
.exam-content{
  font-family: PingFang SC;
font-weight: 400;
font-size: 14px;
line-height: 19.6px;
margin:20px 0px;
letter-spacing: 0%;

color:#333;
}
</style>